<template>
    <div class="mg-list-view">

    </div>
</template>

<script>
import { useListView } from '../hooks'
export default {
    name: 'MgListView',
    props: {
        data: {
            type: Array,
            default: []
        },
        temp: {
            type: String,
            default: ''
        },
        column: {
            type: Number,
            default: 3
        },
        margin: {
            type: Number,
            default: 10
        },
        marginX: {
            default: null
        },
        marginY: {
            default: null
        },
        delBtn: {
            type: Boolean,
            default: false
        },
        delBtnCustom: {
            type: Function,
            default: () => {}
        }
    },
    emits: ['after-content'],
    setup(props, context) {
        return useListView(props, context)
    },
}
</script>

<style lang="scss">
    @font-face {
        font-family: "iconfont"; /* Project id 2951430 */
        src: url('//at.alicdn.com/t/font_2951430_qtid4spai2.woff2?t=1637748798107') format('woff2'),
            url('//at.alicdn.com/t/font_2951430_qtid4spai2.woff?t=1637748798107') format('woff'),
            url('//at.alicdn.com/t/font_2951430_qtid4spai2.ttf?t=1637748798107') format('truetype');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-delete:before {
        content: "\e620";
    }

    .icon-edit:before {
        content: "\e618";
    }

    .mg-list-view {

        .list-view-body {
            display: flex;
            flex-wrap: wrap;

            .list-view-item {

                .item-wrapper {
                    box-shadow: 0 0 3px #999;
                    padding: 10px 15px;

                    .item-header {
                        display: flex;
                        justify-content: flex-end;

                        .item-toolbar {

                            span:hover {
                                cursor: pointer;
                            }
                        }
                    }
                }
                
            }
        }
    }
</style>